import { FC, useEffect } from "react";
import useGetPageInfo from "@/hooks/useGetPageInfo";
import { Form, Input } from "antd";
import TextArea from "antd/es/input/TextArea";
import { useDispatch } from "react-redux";
import { resetPageInfo } from "@/store/pageInfoReducer";

const PageInfo: FC = () => {
  const pageInfo = useGetPageInfo();

  const [form] = Form.useForm();

  const dispatch = useDispatch();

  useEffect(() => {
    form.setFieldsValue({ ...pageInfo });
  }, [pageInfo, form]);

  function handleValuesChange() {
    // console.log(form.getFieldsValue());
    dispatch(resetPageInfo(form.getFieldsValue()));
  }

  return (
    <div>
      <Form
        layout="vertical"
        initialValues={{ ...pageInfo }}
        form={form}
        onValuesChange={handleValuesChange}
      >
        <Form.Item
          label="标题"
          name="title"
          rules={[{ required: true, message: "请输入标题" }]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          label="描述"
          name="desc"
          rules={[{ required: true, message: "请输入描述" }]}
        >
          <TextArea></TextArea>
        </Form.Item>
        <Form.Item
          label="CSS"
          name="css"
          rules={[{ required: true, message: "请输入CSS" }]}
        >
          <TextArea></TextArea>
        </Form.Item>
        <Form.Item
          label="JS"
          name="js"
          rules={[{ required: true, message: "请输入JS" }]}
        >
          <TextArea></TextArea>
        </Form.Item>
      </Form>
    </div>
  );
};

export default PageInfo;
